<template>
  <view class="main">
    <z-paging
        ref="paging"
        v-model="contentList"
        class="notice-list"
        @query="getNoticeList"
    >
      <view style="padding: 20rpx">
        <view
            v-for="(notice, index) in contentList"
            :key="index"
            :class="{ expanded: expandedIndex === index }"
            class="notice-item ovh w99 rds20r"
        >
          <view
              :class="{ expanded: expandedIndex === index }"
              class="notice-header"
              @click="toggleExpand(index, notice)"
          >
            <view class="title-image">
              <view class="notice-time">
                {{ notice.time }}
              </view>
              <view
                  :class="{ expanded: expandedIndex === index }"
                  class="notice-title"
              >
                {{ notice.title }}
              </view>
            </view>
          </view>
          <view v-if="expandedIndex === index" class="notice-content">
            <u-parse :content="notice.content"></u-parse>
          </view>
        </view>
      </view>
    </z-paging>
  </view>
</template>

<script>
import {getConsultList,getNoticeInfo} from "../../api/old";

export default {
  data() {
    return {
      tabList: ["信息交互", "公告"],
      categoryList: ["分类1", "分类2", "分类3"],
      number: "",
      expandedIndex: -1,
      activeCategory: -1,
      index: -1,
      list: [],
      contentList: [],
      list1: [],
      curNow: 0,
      query: {status: 0},
      page: {pageSize: 10, pageNum: 1},
    };
  },
  async onLoad() {
    // showLoading();
    await this.getNoticeList();
    // hideLoading();
  },
  methods: {
    //公告内容列表
    getNoticeList(pageNum = 1) {
      getConsultList({
        pageNum: pageNum,
        pageSize: 10,
      }).then((res) => {
        if (res.code != 200) return;
        // this.contentList = res.rows;
        this.$refs.paging.complete(res.rows);
      });
    },

    toggleExpand(index, val) {
      console.log(this.curNow, "asdasdasdas");
      if (this.curNow == 1) {
        getNoticeInfo(val.id).then((res) => {
          val.content = res.data.content;
        });
      }

      if (this.expandedIndex === index) {
        this.contentList[index].expanded = false;
        this.expandedIndex = -1;
      } else {
        this.contentList.forEach((notice, i) => {
          notice.expanded = i === index;
        });
        this.expandedIndex = index;
      }
    },
    formatTime(time) {
      // 去掉日期字符串中的"T"
      const formattedTime = time.replace("T", " ");
      const dateTime = new Date(formattedTime);
      const year = dateTime.getFullYear();
      const month = ("0" + (dateTime.getMonth() + 1)).slice(-2);
      const day = ("0" + dateTime.getDate()).slice(-2);
      const hour = ("0" + dateTime.getHours()).slice(-2);
      const minute = ("0" + dateTime.getMinutes()).slice(-2);

      return `${year}-${month}-${day} ${hour}:${minute}`;
    },
  },
};
</script>

<style scoped>
.main {
  padding: 30rpx;
  box-sizing: border-box;
}

.notice-list {
  margin-top: 30rpx;
  padding: 30rpx;

  box-sizing: border-box;
}

.notice-item {
  margin-bottom: 20rpx;
  background-color: #fff;
  border-radius: 20rpx;
  box-shadow: 0 5rpx 10rpx rgba(0, 0, 0, 0.3);
  /* transition: height 0.3s; */
  /* overflow: hidden; */
  /* margin: 30rpx; */

  border: thin solid #d2cccc;
}

.notice-item.expanded {
  box-shadow: 5rpx 5rpx 10rpx rgba(0, 0, 0, 0.4);
}

.notice-header {
  padding: 20rpx;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: #fff;
  cursor: pointer;
}

.notice-header.expanded {
  background-color: #f2f2f2;
}

.title-image {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-start;
  width: 100%;
}

.notice-title {
  font-size: 32rpx;
  font-weight: bold;
  color: #000;
  text-align: center;
  margin-bottom: 10rpx;
  width: 100%;
}

.notice-time {
  font-size: 28rpx;
  color: #666;
}

.notice-content {
  padding: 20rpx;
  background-color: #fff;
  font-size: 28rpx;
}

.notice-content.expanded {
  padding: 20rpx;
  background-color: #f2f2f2;
}

.notice-text {
  font-size: 28rpx;
  color: #333;
  text-align: justify;
}

.u-tabs-item {
  border-radius: 10px; /* 设置圆角 */
  opacity: 0.3; /* 设置透明度 */
  box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3); /* 设置轻阴影 */
}
</style>
